<style type="text/css">
	
				#head{
			height: 34px;
			background: #F8F8F8;
		}
		.head-nav{
			width: 1200px;
			height: 100%;
			margin: 0 auto;
			font-size: 12px;
		}
		ul{
			padding:0 ;
			margin: 0;
			list-style: none;
		}
		.head-nav-left{
			padding-top: 6px;
		}
		.head-nav>ul>li{
			position: relative;
			/*display: inline;*/
			float: left;
			line-height: 20px;
		}
		.head-nav li a{
			/*display: block;*/
			text-decoration: none;
			color: #444;
		}
		.head-nav-left a{
			margin-right: 30px;
		}
		.good{
			padding-left:30px ;
		}
		.icon{
			background-image: url("../image/icon.png");
			display:block;
			width: 30px;
			height: 30px;
		}
		.icon-wx{
			background-position: 0 -150px;
			position: absolute;
			top: -3px;
			left: 0px;
		}
		.icon-fsb{
			background-position: -30px -150px;
			position: absolute;
			top: -3px;
			left: 0px;
		}
		.head-nav-right{
			float: right;
		}
		.head-nav-right>li{
			padding: 0 28px 0 28px;
		}
		.head-nav-right>li>a{
			font-size: 12px;
		}
		.icon-shop{
			position: absolute;
			top: -7px;
			left: 0px;
			background-position: -30px 0;
		}
		.icon-me{
			position: absolute;
			top: -6px;
			left: 0px;
			background-position: -90px 0;
		}
		.icon-house{
			position: absolute;
			top: -5px;
			left: 0px;
			background-position: -60px 0;
		}
		#first,#last{
			position: relative;
			padding: 0 28px 0 15px;
		}
		#first{
			border-left: solid 1px #ddd;
			border-right: solid 1px #ddd;
		}
		.icon-down{
			position: absolute;
			top: -6px;
			right: 5px;
			background-position: -60px -30px;
			
		}
		@keyframes around{
			from{
				transform: rotateZ(0);
			}
			to{
				transform: rotateZ(180deg);
			}
		}
		.icon-down:hover{
			animation-name: around;
			animation-duration: 0.5s;
			animation-timing-function: linear;
		}
		#last ul{
			margin-top: 6px;
			position: absolute;
			left: -1px;/*实现对齐*/
			border: solid 1px #ddd;
			border-top:none ;
			width: 100%;
			z-index: 21;
		}
		#last ul li{
			height: 40px;
			line-height: 40px;
			font-size:14px ;
			text-align: center;
			background-color: #F8F8F8;
			height: 0;
			font-size: 0;
			transition: all 0.3s;	
		}
		#last ul li:hover{
			background: #ff6e6e;
		}
		#last:hover ul li{
			height: 40px;
			font-size: 14px;
		}
	
</style>
	<header>
			<div id="head">
				<div class="head-nav">
					<ul class="head-nav-left">
						{{if name}}
						<li><a>{{name}}</a></li>
						<li><a href="/logout">退出</a></li>
						{{else}}
						<li><a onclick="location.href='/register'"style="cursor: pointer;">免费注册</a></li>
						<li><a href="/login">登录</a></li>
						<li class="good"><a href="#"><span class="icon icon-wx"></span>微信登录</a></li>
						<li class="good"><a href="#"><span class="icon icon-fsb"></span>QQ登录</a></li>
						{{/if}}
					</ul>
					<ul class="head-nav-right">
						<li><a href="/shoppingCar_login"><span class="icon icon-shop"></span>购物车</a></li>
						<li><a href="#"><span class="icon icon-me"></span>我的Panli</a></li>
						<li><a href="#"><span class="icon icon-house"></span>我的仓库</a></li>
						<li id="first">
							<a href="#"><span class="icon icon-down"></span>关注微信</a>
							<div class="code-hover" style="width: 236px;height: 132px;position: absolute;top: 27px;
								left:-43px ;z-index:12;display: none;">
								<img src="image/code-hover.png"/>
							</div>
						</li>
						<li id="last">
							<a href="http://service.panli.com/" target="_blank"><span class="icon icon-down"></span>帮助中心</a>
							<ul>
								<li><a href="#" class="list">费用估算</a></li>
								<li><a href="#" class="list">运送对比</a></li>
								<li><a href="#" class="list">包裹跟踪</a></li>
								<li><a href="#" class="list">汇率换算</a></li>
								<li><a href="#" class="list">尺码换算</a></li>
								<li><a href="#" class="list">代购助手</a></li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</header>